<template>
<div class="buy-set-content pl16 pr16">
    <!--其他设置-->
    <div class="common-form">{{$t('product.other_settings')}}</div>
    <el-form-item :label="$t('product.product_properties')">
      <el-radio-group v-model="form.model.isVirtual">
        <el-radio :label="0">{{$t('product.physical_product')}}</el-radio>
        <el-radio :label="1">{{$t('product.virtual_product_note')}}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      :label="$t('product.shipping_template')"
      :rules="[{  required: true,  message: $t('product.select_shipping_template')}]"
      prop="model.deliveryId"
      v-if="form.model.isVirtual == 0"
    >
      <el-select v-model="form.model.deliveryId" style="width: 460px">
        <el-option
          v-for="item in form.delivery"
          :value="item.deliveryId"
          :key="item.deliveryId"
          :label="item.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('product.initial_sales')">
      <el-input
        type="number"
        min="0"
        v-model="form.model.salesInitial"
        class="max-w460"
      ></el-input>
    </el-form-item>
    <el-form-item
      :label="$t('product.product_sort')"
      :rules="[{  required: true,  message: ' '}]"
      prop="model.productSort"
    >
      <el-input
        type="number"
        min="0"
        v-model="form.model.productSort"
        class="max-w460"
      ></el-input>
    </el-form-item>
    <el-form-item
      :label="$t('product.purchase_limit')"
      :rules="[{  required: true,  message: ' '}]"
      prop="model.limitNum"
    >
      <el-input
        type="number"
        min="0"
        v-model="form.model.limitNum"
        class="max-w460"
      ></el-input>
      <div class="gray9">{{$t('product.purchase_limit_note')}}</div>
    </el-form-item>
    <el-form-item :label="$t('product.shipping_type')" v-if="form.model.isVirtual == 1">
      <el-radio-group v-model="form.model.virtualAuto">
        <el-radio :label="1">{{$t('product.auto')}}</el-radio>
        <el-radio :label="0">{{$t('product.manual')}}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      :label="$t('product.virtual_content_label')"
      :rules="[{  required: true,  message: $t('product.input_virtual_content')}]"
      prop="model.virtualContent"
      v-if="form.model.isVirtual == 1"
    >
      <el-input
        type="text"
        v-model="form.model.virtualContent"
        class="max-w460"
      ></el-input>
      <div class="gray9">{{$t('product.virtual_item_content')}}</div>
    </el-form-item>
    <el-form-item :label="$t('product.member_level_limit')">
      <el-select
        v-model="form.model.gradeIds"
        multiple
        :placeholder="$t('product.please_select')"
        style="width: 460px"
      >
        <el-option
          v-for="item in form.gradeList"
          :key="item.gradeId"
          :label="item.name"
          :value="item.gradeId"
        >
        </el-option>
      </el-select>
      <div class="gray9">{{$t('product.level_purchase_note')}}</div>
    </el-form-item>
    <el-form-item :label="$t('product.custom_form')">
      <el-switch
        :active-value="true"
        :inactive-value="false"
        v-model="customBtn"
        @change="customMessBtn"
        size="large"
      >
        <span slot="open">{{$t('product.enable')}}</span>
        <span slot="close">{{$t('product.disable')}}</span>
      </el-switch>
      <div class="addCustom_content" v-if="customBtn">
        <div
          v-for="(item, index) in form.model.customForm"
          :key="index"
          class="custom_box"
        >
          <el-input
            v-model.trim="item.title"
            :placeholder="$t('product.form_title') + (index + 1)"
            style="width: 150px; margin-right: 10px"
            :maxlength="10"
          />
          <el-select
            v-model="item.label"
            style="width: 200px; margin-left: 6px; margin-right: 10px"
          >
            <el-option
              v-for="items in CustomList"
              :value="items.value"
              :key="items.value"
              :label="items.label"
            ></el-option>
          </el-select>
          <el-checkbox v-model="item.status">{{$t('product.required_field')}}</el-checkbox>
          <div class="addfont" @click="delcustom(index)">
            <!-- <el-icon>
              <Delete />
            </el-icon> -->{{$t('product.delete')}} 
</div>
        </div>
      </div>
      <div class="addCustomBox" v-if="customBtn">
        <el-button class="btn" @click="addcustom">{{$t('product.add_form_button')}}</el-button>
        <div class="titTip"> {{$t('product.custom_form_tip')}} 

</div>
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      unit: "%",
      gradeUnit: "%",
      customBtn: false,
      CustomList: [{
        value: "text",
        label: $t("product.text_field")
      }, {
        value: "number",
        label: $t("product.number_field")
      }, {
        value: "email",
        label: $t("product.email_field")
      }, {
        value: "data",
        label: $t("product.date_field")
      }, {
        value: "time",
        label: $t("product.time_field")
      }, {
        value: "id",
        label: $t("product.id_card_field")
      }, {
        value: "phone",
        label: $t("product.phone_field")
      }, {
        value: "img",
        label: $t("product.image")
      }]
    };
  },
  created() {
    if (this.form.model.aloneGradeType == 20) {
      this.gradeUnit = $t("product.currency_yuan");
    }
    if (this.form.model.agentMoneyType == 20) {
      this.unit = $t("product.currency_yuan");
    }
    if (this.form.model.customFormStr) {
      this.form.model.customForm = JSON.parse(this.form.model.customFormStr);
    }
    if (this.form.model.customForm && this.form.model.customForm.length != 0) {
      this.customBtn = true;
    }
  },
  inject: ["form"],
  methods: {
    customMessBtn(e) {
      if (!e) {
        this.form.model.customForm = [];
      }
    },
    addcustom() {
      if (!this.form.model.customForm) {
        this.form.model.customForm = [];
      }
      if (this.form.model.customForm && this.form.model.customForm.length > 9) {
        ElMessage.warning($t("product.max_items_tip"));
      } else {
        this.form.model.customForm.push({
          title: "",
          label: "text",
          value: "",
          status: false
        });
      }
    },
    delcustom(index) {
      this.form.model.customForm.splice(index, 1);
    },
    /*换算单位*/
    changeMoneyType: function (val) {
      if (val == "10") {
        this.unit = "%";
      } else {
        this.unit = $t("product.currency_yuan");
      }
    },
    /*换算单位*/
    changeGradeType: function (val) {
      if (val == "10") {
        this.gradeUnit = "%";
      } else {
        this.gradeUnit = $t("product.currency_yuan");
      }
    }
  }
};
</script>

<style scoped>
.addCustom_content {
  margin-top: 20px;

  .custom_box {
    margin-bottom: 10px;
  }
}

.addCustomBox {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  color: var(--prev-color-primary);

  .btn {
    cursor: pointer;
    width: max-content;
    background-color: rgba(64, 149, 229, 1);
    color: rgba(255, 255, 255, 1);
  }
}

.titTip {
  display: inline-bolck;
  font-size: 12px;
  line-height: 24px;
  font-weight: 400;
  color: #999999;
}
.addfont {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #4095e5;
  margin-left: 14px;
  cursor: pointer;
}
</style>

